<template>
    <div>
        <el-col class="first-col">
            <el-row class="firstRow"><!--去分享-->
                <el-col style="height: inherit; width: inherit;">
                    <el-row style="height: 15%;"><!--文字-去分享-->
                    <span class="title-font">去分享</span>
                    <div class="title-bottom"></div>
                    </el-row>
                    <el-row class="toShare-row"><!--去分享填信息-->
                        <el-col class="toShare-col">
                            <el-row class="input-row">
                                <span class="inputMsg-font">资料填写</span>
                            </el-row>
                            <el-row style="width:100%;height:3%;display: flex;justify-content: right;">
                                <span class="pinkLine"></span>
                            </el-row>
                            <el-row style="width:85%;height:87%;">
                                <el-col class="toShare-main-col">
                                    <el-row class="pink-BG"><!--粉色底纹-->
                                        <el-col class="inputImg-col"><!--上传书籍封面-->
                                            <el-row class="inputImg-gray"  ref="inputImg"  :style="{ 'background-image': `url(${filePath})`,'background-size': 'cover' }">
                                                <!-- <span class="bookImg-font">上传书籍封面</span> -->
                                                <label for="upload" class="bookImg-font">上传书籍封面</label>
                                                <input id="upload" type="file" style="display: none;" @change="handleFileUpload">
                                            </el-row>
                                        </el-col>
                                        <el-col class="inputMsg-col"><!--信息填写-->
                                            <el-row style="height:85%;width:100%;">
                                                <el-col style="height:100%;width:30%;">
                                                    <el-row class="inputMsg-everyfont"><span class="every-font">书籍名称:</span></el-row> 
                                                    <el-row class="inputMsg-everyfont"><span class="every-font">作者:</span></el-row> 
                                                    <el-row class="inputMsg-everyfont"><span class="every-font">出版社:</span></el-row> 
                                                    <el-row class="inputMsg-everyfont"><span class="every-font">出版日期:</span></el-row>  
                                                    <el-row class="inputMsg-everyfont"><span class="every-font">书籍类型:</span></el-row>
                                                    <el-row class="inputMsg-everyfont"><span class="every-font">书籍识别号:</span></el-row> 
                                                    <el-row class="inputMsg-everyfont"><span class="every-font">书籍价格:</span></el-row> 
                                                </el-col>
                                                <el-col style="height:100%;width:70%;">
                                                    <el-row class="inputMsg-everyfont">
                                                        <el-input v-model="input1" placeholder="请输入书籍名称"  size="mini" style="width:200px;"></el-input> 
                                                    </el-row>
                                                    <el-row class="inputMsg-everyfont">
                                                        <el-input v-model="input2" placeholder="请输入书籍作者" size="mini" style="width:200px;"></el-input> 
                                                    </el-row>
                                                    <el-row class="inputMsg-everyfont">
                                                        <el-input v-model="input3" placeholder="请输入书籍出版社" size="mini" style="width:200px;"></el-input> 
                                                    </el-row>
                                                    <el-row class="inputMsg-everyfont">
                                                        <el-date-picker
                                                             v-model="value1"
                                                             type="date"
                                                             placeholder="选择日期"
                                                             size="mini"
                                                             style="width:200px;">
                                                        </el-date-picker>
                                                    </el-row>
                                                    <el-row class="inputMsg-everyfont">
                                                        <!-- <el-select v-model="valueType" placeholder="请选择书籍类型" size="mini" style="width:200px;">
                                                             <el-option
                                                                v-for="item in options"
                                                                :key="item.value"
                                                                :label="item.label"
                                                                :value="item.value">
                                                            </el-option>
                                                        </el-select> -->
                                                        <el-cascader
                                                        v-model="valueType"
                                                        size="mini"
                                                        :options="options"
                                                        :props="{ expandTrigger: 'hover' }">
                                                        </el-cascader>
                                                      </el-row>
                                                        <el-row class="inputMsg-everyfont">
                                                        <el-input v-model="value" placeholder="请输入书籍识别号" size="mini" style="width:200px;"></el-input> 
                                                    </el-row>
                                                    <el-row class="inputMsg-everyfont">
                                                        <el-input v-model="input4" placeholder="请输入书籍价格" size="mini" style="width:200px;"></el-input> 
                                                    </el-row>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                        <el-col class="toShare-col-btn"><!--按钮-->
                                            <button class="toShare-btn" @click="init()">重置</button>
                                            <button class="toShare-btn" @click="toShare">申请</button>
                                            <el-dialog
                                                :visible.sync="dialogVisible"
                                                 width="50%">
                                                 <span style="font-size:17px;">申请成功，等待管理员审核</span>
                                                 <span slot="footer" class="dialog-footer">
                                                 <el-button @click="dialogVisible = false">取 消</el-button>
                                                 <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                                 </span>
                                            </el-dialog>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row class="secondRow"><!--看分享-->
                <el-col style="height: inherit; width: inherit;">
                    <el-row style="height: 15%;"><!--文字-看分享-->
                    <span class="title-font">看分享</span>
                    <div class="title-bottom"></div>
                    </el-row>
                    
                        <el-row class="toSeeShare-row">
            <el-col style="height:100%;width:100%;">
                <el-row class="searchBar"><!--搜索框-->
                    <el-col class="search-col">
                        <el-row class="searchBG"><!--搜索框的米色背景板-->
                            <el-col style="height:100%;width:10%;display: flex;justify-content: center;align-items: center;"><!--搜索图标-->
                                <img src="../../assets/img/common/search.png" class="img-search">
                            </el-col>
                            <el-col style="height:100%;width:76%;display: flex;"><!--输入框-->
                                <input placeholder="请输入书刊名称、关键字或作者" class="input-search" v-model="keywords">
                            </el-col>
                            <el-col style="height:100%;width:14%;display: flex;align-items: center;justify-content: center;"><!--搜索按钮-->
                                <button class="search-btn" @click="toSearchBooks()">搜索</button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="searchResult"><!--搜索结果展示-->
                  <el-col v-for="item in searchBooks" :key="item" class="book-col">
                    <el-row class="book-img-col"><img :src="item.img" class="search-img"></el-row>
                    <el-row class="search-font">{{ item.name }}</el-row>
                    <el-row class="search-btn-row">
                      <el-dialog
                                                :visible.sync="dialogVisible2"
                                                 width="50%">
                                                 <el-row style="display:flex;justify-content:center;align-items:center;">
                                                    <el-col style="width:10%;">
                                                        <img src="../../assets/img/common/warn.png" style="height:40px;width:auto;margin-left:20px;">
                                                    </el-col>
                                                    <el-col style="width:90%;">
                                                         <span style="font-size:18px;margin-left:30px;">该书籍为共享书籍，借阅需向图书馆和书籍提供者支付少量费用</span>
                                                    </el-col>
                                                </el-row>
                                                 <span slot="footer" class="dialog-footer">
                                                 <el-button @click="dialogVisible2 = false">取 消</el-button>
                                                 <el-button type="primary" @click="borrow()">支 付</el-button>
                                                 </span>
                        </el-dialog>
                        <button v-if="!item.isBorrow" class="search-btn-bottom-ok" @click="toBorrowShare(item)">借阅</button><!--没有被借阅-->
                      <button v-if="item.isBorrow" class="search-btn-bottom-not">已借阅</button>
                    </el-row>
                  </el-col>
                </el-row>
            </el-col>
          </el-row>
                  
                </el-col>
            </el-row>
            <el-row style="background-color:white;width:100%;"><!--bottom-->
                <bottom></bottom>
            </el-row>

        </el-col>
    </div>
</template>

<script>
import axios from "axios"
import bottom from "@/components/userCommon/bottom.vue"
export default{
    name:"share",
    components:{
        bottom
    },
    mounted(){
      
      this.getAllShare()
    },
    data(){
     
        return{
            input1:'',
            input2:'',
            input3:'',
            value1:'',
            input4:'',
            valueType:"",
            options: [{
          value: '思想类',
          label: '思想类'
        }, {
          value: '哲学宗教类',
          label: '哲学宗教类'
        }, {
          value: '社会科学类',
          label: '社会科学类',
          children:[
            {
              value: '社会科学总论',
              label: '社会科学总论',
            },
            {
              value: '政治法律类',
              label: '政治法律类',
            },
            {
              value: '军事类',
              label: '军事类',
            },
            {
              value: '经济类',
              label: '经济类',
            },
            {
              value: '文化科学教育体育类',
              label: '文化科学教育体育类',
            },
            {
              value: '语言文字类',
              label: '语言文字类',
            },
            {
              value: '文学类',
              label: '文学类',
            },
            {
              value: '艺术类',
              label: '艺术类',
            },
            {
              value: '历史地理类',
              label: '历史地理类',
            },
          ]
        }, {
          value: '自然科学类',
          label: '自然科学类',
          children:[
          {
              value: '自然科学总论',
              label: '自然科学总论',
            },
            {
              value: '数理科学和化学',
              label: '数理科学和化学',
            },
            {
              value: '天文学、地球科学',
              label: '天文学、地球科学',
            },
            {
              value: '生物科学',
              label: '生物科学',
            },
            {
              value: '医药、卫生',
              label: '医药、卫生',
            },
            {
              value: '农业科学',
              label: '农业科学',
            },
            {
              value: '工业技术',
              label: '工业技术',
            },
            {
              value: '交通运输',
              label: '交通运输',
            },
            {
              value: '航空、航天',
              label: '航空、航天',
            },
            {
              value: '环境科学、安全科学',
              label: '环境科学、安全科学',
            },
          ]
        }, {
          value: '综合性图书类',
          label: '综合性图书类'
        }],
        value: '',
        currentBookName:'',
        searchBooks:[
            {img:require('../../assets/img/user/book/book1.jpg'),name:'《贫穷的本质》',isBorrow:false},
            {img:require('../../assets/img/user/book/book2.jpg'),name:'《世界现代设计史》',isBorrow:true},
            {img:require('../../assets/img/user/book/book3.jpg'),name:'《经济学原理》',isBorrow:false},
            {img:require('../../assets/img/user/book/book4.jpg'),name:'《世界工艺美术史》',isBorrow:true},
            {img:require('../../assets/img/user/book/book1.jpg'),name:'《贫穷的本质》',isBorrow:false},
      ],
      dialogVisible:false,
      dialogVisible2:false,
      keywords:'',
      userId:'24123',
      img:'',
      filePath:'',
      typeInput:'',
      fileName:'',
      type1:'',
      type2:''
        }
    },
    methods:{
        init(){
            console.log('init')
            this.input1=''
            this.input2='';
            this.input3='';
            this.value1='';
            this.value='';
        },
        borrow(){

          axios({
        method:'get',
        url:'http://localhost:5000/reader/borrowShare',
        params:{
          'name':this.currentBookName,
          'userId':this.userId,      
    
        }
       
    }).then(r=>{//发送成功
      if(r.data.data.result==='借阅失败！'){
         //借阅失败
         this.$message.error(r.data.data.content);
         this.dialogVisible2=false
      }else{
    this.getAllShare()
    this.dialogVisible2=false
    // 显示成功的消息提示框
    this.$message({
      message: r.data.data.result,
      type: 'success'
    });
      }
    }).catch(r=>{
        console.log(r)
    })  
        },

  toSearchBooks(){
    
    axios({
        method:'get',
        url:'http://localhost:5000/reader/searchShareBooks',
        params:{
          'keywords':this.keywords
    
        }
       
    }).then(r=>{//发送成功
      this.searchBooks = r.data.data.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
            isBorrow:book.isBorrow
          }));
    }).catch(r=>{
        console.log(r)
    })
  },
  toShare(){
    this.dialogVisible=true
    // 使用 Object.values() 方法将对象转换为数组
const valueTypeArray = Object.values(this.valueType);
if(valueTypeArray.length===1){
  this.type1=valueTypeArray[0]
  this.type2=this.type1
}else{
  this.type1=valueTypeArray[0]
  this.type2=valueTypeArray[1]
}
console.log(this.type1+" "+this.type2)
console.log(this.typeInput)
    axios({
        method:'get',
        url:'http://localhost:5000/reader/toShare',
        params:{
          'userId':this.userId,
          'name':this.input1,
          'author':this.input2,
          'output':this.input3,
          'date':this.value1,
          'code':this.value,
          'img':this.fileName,
          'type1':this.type1,
          'type2':this.type2,
          'price':this.input4
          
    
        }
       
    }).then(r=>{//发送成功
      // this.input1=''
      // this.input2='';
      // this.input3='';
      // this.value1='';
      // this.value='';
      // this.valueType=''
      console.log('toshare')
      console.log(r.data.data)
      console.log('toshare2')

    }).catch(r=>{
        console.log(r)
    })
  },
  handleFileUpload(event){
    const file = event.target.files[0];
    this.fileName = file.name.replace(/\.[^/.]+$/, ''); // 移除文件扩展名
      console.log('文件名',this.fileName)//数据库存的

      this.filePath=require("D:/librarycover/" + this.fileName + ".jpg")


  },
  getAllShare(){
    console.log('2')
    axios({
        method:'get',
        url:'http://localhost:5000/reader/getAllShare',
        params:{
         'userId':this.userId
        }
       
    }).then(r=>{//发送成功
      console.log('11')
      console.log(r.data.data)
      this.searchBooks = r.data.data.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
            isBorrow:book.isBorrow
          }));
    }).catch(r=>{
        console.log(r)
    })
  },
  toBorrowShare(book){
    this.dialogVisible2=true
    console.log(book)
    this.currentBookName=book.name

    this.getAllShare()

  }


    }

}
</script>
<style scoped>
.first-col {
  display: flex;
  padding-top: 50px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color:rgba(237, 237, 237, 1);
}
.firstRow{
  height: 560px;
  width: 80%;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.secondRow{
  height: 480px;
  width: 85%;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;

}
.title-font {
  font-size: 30px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-left: 50px;
}
.title-bottom {
  background-color: rgba(168, 189, 203, 1);
  width: 200px;
  height: 10px;
  border-radius: 5px;
}
.toShare-row{
    height:85%;
    width:100%;
    background-color: white;
    border-radius: 50px;
}
.toSeeShare-row{
    height:85%;
    width:100%;
    background-color: white;
    border-radius: 50px;
}
.inputMsg-font{
    font-size:23px;
    font-weight: bold;
    align-self: center;
}
.input-row{
    width:100%;
    height:10%;
    display:flex;
    justify-content: right;
    padding-top:10px;
    padding-right: 50px;
}
.toShare-col{
    height:100%;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.pinkLine{
    height:100%;
    width:15%;
    background-color:rgba(255, 224, 224, 1);
    border-radius: 30px;
    margin-right:30px;
}
.toShare-main-col{
    height:100%;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}
.pink-BG{
    width:100%;
    height:90%;
    background-color:rgba(237, 209, 209, 1);
    border-radius: 40px;
    margin-bottom: 10px;
}
.inputImg-col{
    height:100%;
    width:35%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inputMsg-col{
    height:100%;
    width:48%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.toShare-col-btn{
    height:100%;
    width:17%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.inputImg-gray{
    width:85%;
    height:78%;
    background-color:rgba(237, 237, 237, 1);
    border-radius: 15px;
    margin-left:20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bookImg-font{
    font-size:20px;
    color:rgba(128, 128, 128, 1);
    cursor: pointer;
}
.inputMsg-everyfont{
    height:15%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.every-font{
    letter-spacing: 2px;
}
.toShare-btn{
    width:90px;
    height:38px;
    border-radius: 10px;
    border-color:transparent;
    background-color: rgba(125, 153, 191, 1);
    font-size:15px;
    color:white;
    margin:20px;
    cursor: pointer;
}
.searchBar{
    width:100%;
    height:25%;
  }
  .search-col{
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .searchBG{
    width:80%;
    height:50%;
    background-color: rgba(229, 229, 229, 1);
    border-radius: 55px;
  }
  .img-search{
    width:auto;

    height:80%;
  }
  .input-search{
    width:100%;
    background-color: transparent;
    border-color:transparent;
    outline: none;
    font-size:18px;
  }
  .search-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    height:70%;
    width:85%;
    border-radius: 40px;
    background-color: #394A79;
    color:white;
    border:transparent;
    font-size:18px;
    cursor: pointer;
    letter-spacing: 1.5px;
  }
  .searchResult{
    width:100%;
    height:75%;
    padding-left:50px;
    padding-right: 50px;
    overflow: auto;
  }
  .searchResult::-webkit-scrollbar{
     width: 0px; /* 设置滚动条的宽度 */
  }
  .book-col{
    width:25%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .book-img-col{
    width:100%;
    height:70%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-img{
    width:auto;
    height:90%;
    border-radius:15px ;
    box-shadow:10px 10px 15px 3px rgba(0,0,0,0.25);
  }
  .search-font{
    width:100%;
    height:10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-btn-row{
    width:100%;
    height:20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-btn-bottom-ok{
    width:45%;
    height:50%;
    font-size:18px;
    background-color: rgba(125, 153, 191, 1);
    color:white;
    border-color:transparent;
    border-radius: 10px;
    cursor: pointer;

  }
  .search-btn-bottom-not{
    width:45%;
    height:50%;
    font-size:18px;
    background-color: rgba(166, 166, 166, 1);
    color:white;
    border-color:transparent;
    border-radius: 10px;
    cursor: pointer;
  }
</style>